<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

<body>
    <div class="container">
      <h2>Inscripcion de Atleta</h2>

      <form role="form">

		<div class="form-group">
     
<!-- <div class="fileinput fileinput-new" data-provides="fileinput"> -->
<!--   <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 200px;"></div> -->
<!--   <div> -->
<!--     <span class="btn btn-default btn-file"><span class="fileinput-new">Buscar</span><span class="fileinput-exists">Cambiar</span><input type="file" name="foto" id="foto"></span> -->
<!--     <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> -->
<!--   </div> -->
<!-- </div> -->

          

   <div tabindex="-1" class="form-control file-caption  kv-fileinput-caption">
   <div title="" style="width: 699.72px;" class="file-caption-name"></div>
</div>
   <div class="input-group-btn">
       <button type="button" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-ban-circle"></i> Remove</button>
       
       <div class="btn btn-primary btn-file"> <i class="glyphicon glyphicon-folder-open"></i> &nbsp;Browse … <input id="foto" multiple="true" class="" type="file"></div>
   </div>



          
        </div>
        <div class="form-group">
<!--           <label for="name">Nombre</label> -->
          <input type="text" class="form-control" id="name" placeholder="Primer Nombre">
        </div>
        <div class="form-group">
<!--           <label for="name">Nombre</label> -->
          <input type="text" class="form-control" id="second_name" placeholder="Segundo Nombre">
        </div>        
		<div class="form-group">
<!--           <label for="apellido">Apellido</label> -->
          <input type="text" class="form-control" id="apellido" placeholder="Apellido">
        </div>
		<div class="form-group">
<!--           <label for="ci">Documento de Identidad</label> -->
          <input type="text" class="form-control" id="ci" data-mask="9-999-999-9" placeholder="Documento de Identidad">
        </div>
		<div class="form-group">
<!--           <label for="Fecha de Nacimiento">Fecha de Nacimiento</label> -->
          <input type="date" class="form-control" id="fechanacimiento" placeholder="Fecha de Nacimiento">
        </div>        
        <div class="form-group">
<!--           <label for="departamento">Departamento</label> -->
          <input type="text" class="form-control" id="departamento" placeholder="Departamento">
        </div>
        <div class="form-group">
<!--           <label for="departamento">Departamento</label> -->
          <input type="text" class="form-control" id="localidad" placeholder="Localidad">
        </div>        
        <div class="form-group">
<!--           <label for="direccion">Direccion</label> -->
          <input type="text" class="form-control" id="direccion" placeholder="Direccion">
        </div>        
        <div class="form-group">
<!--           <label for="telefono">Telefono</label> -->
          <input type="text" class="form-control" id="telefono" placeholder="Telefono">
        </div>   
        <div class="form-group">
<!--           <label for="celular">Celular</label> -->
          <input type="text" class="form-control" id="celular" placeholder="Celular">
        </div>   
        <div class="form-group">
<!--           <label for="email">Email:</label> -->
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
<!--         <div class="form-group"> -->
<!--           <label for="pwd">Password:</label> -->
<!--           <input type="password" class="form-control" id="pwd" placeholder="Enter password"> -->
<!--         </div> -->
<!--         <div class="checkbox"> -->
<!--           <label><input type="checkbox"> Remember me</label> -->
<!--         </div> -->
        <button type="submit" class="btn btn-default">Registrar</button>
      </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    
    			<script>
				$("#foto").fileinput({
				maxFilesNum: 10,
				allowedFileExtensions: ["jpg", "gif", "png", "txt"]
				});
			</script>
    
  </body>
</html>



<!-- Direccion de creacion de formularios rapidos: http://bootsnipp.com/forms -->

<!-- Tips http://plugins.krajee.com/file-input/demo 
http://getbootstrap.com/css/
http://jasny.github.io/bootstrap/javascript/
-->
